<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>资源管理</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../resource/css/layui.css">
	<link rel="stylesheet" href="../../../resource/css/common.css">
	<style type="text/css">
		.left-menutree {
			min-width: 200px;
			margin: 10px auto;
			width: 20%;
			float: left;
		}
		.xtree_contianer {
			width: 300px;
			border: 1px solid #9C9C9C;
			overflow: auto;
			margin-bottom: 30px;
			background-color: #fff;
			padding: 10px 0 25px 5px;
		}
		.right-operatearea {
			width: 78%;
			float: right;
		}
	</style>
</head>
<body>
	<div class="left-menutree">
		<form class="layui-form">
			<div id="xtree3" class="xtree_contianer"></div>
		</form>
	</div>
	<div class="right-operatearea">
		<div class="resourcefrom" style="font-size: 14px;">
			<button class="layui-btn" data-type="add">新增</button>
		</div>
		<table id="tb" class="canScroll" lay-filter="resourcetable-filter"></table>
	</div>

	<script src="../../../resource/js/layui.js"></script>
	<script src="../../../resource/js/xtree.js"></script>
	<script type="text/html" id="resourceChild">
		{{# if(d.data.length > 0){ }}
	    	<a href="javascript:void(0)" style="color: blue;" lay-event="child">{{ d.code }}</a>
		{{# }else{ }}
			{{ d.code }}
		{{# } }}
	</script>
	<script type="text/html" id="resourceTool">
	    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
		{{# if(d.state == 0){ }}
 			<a class="layui-btn layui-btn-normal" lay-event="open">启用</a>
		{{# }else{ }}
 			<a class="layui-btn layui-btn-warm" lay-event="stop">停用</a>
		{{# } }}
	    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
	<script type="text/javascript">
		/* var json = [
		    {
		        title: "节点1", value: "jd1", data: [
		          { title: "节点1.1", checked: true, disabled: true, value: "jd1.1", data: [] }
		        , { title: "节点1.2", value: "jd1.2", checked: true, data: [] }
		        , { title: "节点1.3", value: "jd1.3", disabled: true, data: [] }
		        , { title: "节点1.4", value: "jd1.4", data: [] }
		        ]
		    }
		    , {
		        title: "节点2", value: "jd2", data: [
		          { title: "节点2.1", value: "jd2.1", data: [] }
		        , { title: "节点2.2", value: "jd2.2", data: [] }
		        , { title: "节点2.3", value: "jd2.3", data: [] }
		        , { title: "节点2.4", value: "jd2.4", data: [] }
		        ]
		    }
		    , { title: "节点3", value: "jd3", data: [] }
		    , { title: "节点4", value: "jd4", data: [] }
		]; */
		var xtree3;
		var xtreeJson = [];// 资源树的json
		var result;// 所有的资源信息
		var resType = {options : [], rule : {} };// 资源类型
		var resState = {options : [], rule : {} };// 资源状态
		var nowParentId = "";// 当前列表的父资源id
		// 初始化
		innit();

		var table;
		var form;
		var $ = layui.$ || parent.window.mod.jquery;
		function innit(){
			layui.use([ 'form', 'table' ], function() {
				table = layui.table;
				form = layui.form;
				$ = layui.$ || parent.window.mod.jquery;
	            // $.ajax({
			    // 	url: localStorage.serverHttp + '/base/auth/resource/getAllResource?_token=' + (new parent.window._user()).getData('token'),
			    // 	type: 'get',
			    // 	dataType: 'json'
			    // }).done(function(res) {
			    // 	result = res;
				// 	if (result.status && 1 === result.status) {
				// 		ConvertToTreeGridJson(result.data, "id", "parentId");
				// 	}

		        //     innitTable();
		        //     initXTree();
				// });
				loadResource(innitLoadResource);
				
				// 加载资源类型
				setType(resType);
				// 加载资源状态
				setState(resState);
			});
		}

		/*
		 * 加载资源数据
		 */
		function loadResource(callback){
			$.ajax({
				url: localStorage.serverHttp + '/base/auth/resource/getAllResource?_token=' + (new parent.window._user()).getData('token'),
				type: 'get',
				dataType: 'json'
			}).done(function(res) {
				result = res;
				if (result.status && 1 === result.status) {
					ConvertToTreeGridJson(result.data, "id", "parentId");
				}
				callback();
			});
		}
		// 加载资源类型
		function setType(resType){
			resType.options = [];
			resType.rule = {};
			$.ajax({
				url: localStorage.serverHttp + '/base/auth/resource/resourceType?_token=' + (new parent.window._user()).getData('token'),
				type: 'post',
				dataType: 'json'
			}).done(function(res) {
				var rows = res.data;
				for (var i = 0; i < rows.length; i++) {
					var row = rows[i];
					if (resType.options) {
						resType.options.push(row);
					} else {
						resType.options = [row];
					}
					resType.rule[row] = row;
				}
			});
		}
		// 加载资源状态
		function setState(resState){
			resState.options = [];
			resState.rule = {};
			$.ajax({
				url: localStorage.serverHttp + '/base/auth/resource/resourceState?_token=' + (new parent.window._user()).getData('token'),
				type: 'post',
				dataType: 'json'
			}).done(function(res) {
				var rows = res.data;
				for (var i = 0; i < rows.length; i++) {
					var row = rows[i];
					if (resState.options) {
						resState.options.push(row.value);
					} else {
						resState.options = [row.value];
					}
					resState.rule[row.value] = row.name;
				}
			});
		}
		function innitLoadResource(){
			innitTable();
			initXTree();
		}
		function innitTable(){
			table.render({
				elem : $('#tb'), // 表格元素
				id : 'tb',
				page : false, // 是否开启分页
				data : xtreeJson,
				loading : true, // 切换 是否 显示loading
				even : true, // 开启隔行背景
				method : 'get', // 请求类型 默认get
				cols : [ [ // 表头
					{checkbox : true},
					{field : 'code', title : '资源code', width : 150, toolbar : "#resourceChild"},
					{field : 'name', title : '资源名称', width : 120},
					{field : 'url', title : '资源路径', width : 400},
					{field : 'type', title : '资源类型', width : 90},
					{field : 'level', title : '资源等级', width : 90},
					{field : 'resOrder', title : '排序号', width : 75},
					{field : 'state', title : '状态', width : 70},
					{field : 'parentId', title : '父资源code', width : 150},
					{field : '', title : '操作', width : 242, toolbar : "#resourceTool"}
				] ],
				done : function(res, curr, count) {// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
					parent.window.resizeIframe(window.frameElement, document.getElementsByTagName('html')[0]);
					parent.window.tableHeaderFixed($, this.elem, 0, true);
					//处理状态列
					$("[data-field='state']").children().each(function() {
						if ($(this).text() == '0') {
							$(this).text("停用");
						} else if ($(this).text() == '1') {
							$(this).text("启用");
						}
					});

					// $("tbody").children().each(function() {
					// 	if ($(this).find("[data-field='level']").text() > 0) {
					// 		console.log($(this));
					// 	}
					// });
				}
			});
			var isXtreeReload = false;// 是否重新加载树
			table.on('tool(resourcetable-filter)', function(obj){
				var data = obj.data; // 获得当前行数据
				var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; // 获得当前行 tr 的DOM对象
				nowParentId = data.parentId;// 当前列表显示的父资源的id
				
				if(layEvent === 'child'){ // 打开子节点
					table.reload('tb', {data: data.data});
				} else if(layEvent === 'edit'){ // 编辑
					// 'options': ['0','1']
					// rule: {0:'女', 1:'男'}
					// 父资源
					var resParentId = {options : [], rule : {} };
					setParentIds(resParentId, false);
					
					var arrInputs = [
						//表头名(field),显示名(title),表单类型(type),显示形式(display),验证条件(verify),提示文字(placeholder),默认初始值(value),请求路径(url),请求参数(data),固定选项(options),宽度(width),id(id属性值),readonly(只读属性，select元素无效)，rule(转换规则)
						{'field': 'id', 'title': 'ID', 'id':'id', 'type': 'input-text', 'display': 'none', 'value': data.id},
						{'field': 'name', 'title': '资源名称', 'id':'name', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入资源名称', 'value': data.name, 'width': '300px'},
						{'field': 'url', 'title': '资源路径', 'id':'url', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '', 'value': data.url, 'width': '300px'},
						// 父资源不允许修改 {'field': 'parentId', 'title': '父资源', 'id':'parentId', 'type': 'select', 'display': 'none', 'verify': 'required', 'placeholder': '根资源', 'value': data.parentId, 'width': '150px', 'url': '', 'data': {}, 'options': resParentId.options, 'readonly': true, rule: resParentId.rule },
						{'field': 'parentId', 'title': '父资源', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'value': resParentId.rule[data.parentId], 'width': '300px','readonly':true},
						{'field': 'type', 'title': '资源类型', 'id':'type', 'type': 'select', 'display': 'block', 'verify': 'required', 'value' : data.type, 'url': '', 'data': {}, 'options': resType.options, 'readonly': true, rule: resType.rule },
						{'field': 'level', 'title': '资源等级', 'id':'level', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入资源等级', 'value': data.level, 'width': '150px'},
						{'field': 'resOrder', 'title': '排序号', 'id':'resOrder', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入排序号', 'value': data.resOrder, 'width': '150px'},
						// 状态不在这里修改 {'field': 'state', 'title': '是否启用', 'id':'state', 'type': 'select', 'display': 'block', 'verify': 'required', 'value' : data.state, 'url': '', 'data': {}, 'options': resState.options, 'readonly': true, rule: resState.rule },
						{'field': 'state', 'title': '是否启用', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'value': resState.rule[data.state], 'width': '150px','readonly':true},
						{'field': 'note', 'title': '备注', 'id':'note', 'type': 'textarea', 'display': 'block', 'verify': 'required', 'placeholder': '', 'value': data.note, 'width': '300px'}
					];
					
					parent.window.layerOpenParams($, layer, arrInputs, 'editResource', editResource);
					form.render();
					$("#parentId").next().width('450px');
					$("#type").next().width('150px');
					$("#state").next().width('150px');
				} else if(layEvent === 'stop'){ // 停用
					layer.confirm('你确定要停用该资源吗？', {
						btn: ['确定','关闭'] // 按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp + '/base/auth/resource/stop?_token=' + (new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			resId : data.id
				    		}
				    	}).done(function(res) {
							layer.msg('停用成功');
							isXtreeReload = false;// 是否更新树
				    		active.reload.call();// 更新列表和树
				    	});
					});
				} else if(layEvent === 'open'){ //启用
					layer.confirm('你确定要启用该资源吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp + '/base/auth/resource/open?_token=' + (new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			resId : data.id
				    		}
				    	}).done(function(res) {
				    		layer.msg('启用成功');
							isXtreeReload = false;// 是否更新树
				    		active.reload.call();// 更新列表和树
				    	});
					});
				} else if(layEvent === 'del'){ //删除
					layer.confirm('你确定要删除该资源及该资源下的所有资源吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp + '/base/auth/resource/delete?_token=' + (new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			resId : data.id
				    		}
				    	}).done(function(res) {
							layer.msg('删除成功');
							isXtreeReload = true;// 是否更新树
				    		active.reload.call();// 更新列表和树
				    	});
					});
				}
			});
			active = {
				reload: function(){
					// loadResource(function(){}) 重新加载资源
					loadResource(function(){
						// 执行重载
						// data.parentId当前节点的父id
						table.reload('tb', {data: foreachJson(xtreeJson[0], nowParentId)});
						// xtree3的options重新赋值
						xtree3._options.data = xtreeJson;
						// 重新加载树
						if(isXtreeReload){
							xtree3.render();
						}
					});
				},
				add: function(){
					// 'options': ['0','1']
					// rule: {0:'女', 1:'男'}
					// 父资源
					var resParentId = {options : [], rule : {} };
					setParentIds(resParentId, true);
					
					var arrInputs = [
						//表头名(field),显示名(title),表单类型(type),显示形式(display),验证条件(verify),提示文字(placeholder),默认初始值(value),请求路径(url),请求参数(data),固定选项(options),宽度(width),id(id属性值),readonly(只读属性，select元素无效)，rule(转换规则)
						{'field': 'name', 'title': '资源名称', 'id':'name', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入资源名称', 'value': '', 'width': '300px'},
						{'field': 'url', 'title': '资源路径', 'id':'url', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '', 'value': '', 'width': '300px'},
						{'field': 'parentId', 'title': '父资源', 'id':'parentId', 'type': 'select', 'display': 'block', 'verify': 'required', 'placeholder': '根资源', 'value': '', 'width': '150px', 'url': '', 'data': {}, 'options': resParentId.options, 'readonly': true, rule: resParentId.rule },
						{'field': 'type', 'title': '资源类型', 'id':'type', 'type': 'select', 'display': 'block', 'verify': 'required', 'url': '', 'data': {}, 'options': resType.options, 'readonly': true, rule: resType.rule },
						{'field': 'level', 'title': '资源等级', 'id':'level', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入资源等级', 'value': '0', 'width': '150px'},
						{'field': 'resOrder', 'title': '排序号', 'id':'resOrder', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入排序号', 'value': '0', 'width': '150px'},
						{'field': 'state', 'title': '是否启用', 'id':'state', 'type': 'select', 'display': 'block', 'verify': 'required', 'url': '', 'data': {}, 'options': resState.options, 'readonly': true, rule: resState.rule },
						{'field': 'note', 'title': '备注', 'id':'note', 'type': 'textarea', 'display': 'block', 'verify': 'required', 'placeholder': '', 'value': '', 'width': '300px'}
					];
					
					parent.window.layerOpenParams($, layer, arrInputs, 'addResource', saveResource);
					form.render();
					$("#parentId").next().width('450px');
					$("#type").next().width('150px');
					$("#state").next().width('150px');
				}
			};
			
			// 加载父资源(针对添加和修改)
			// isSelect: 判断是不是下拉列表
			function setParentIds(resParentId, isSelect){
				setParentIdsChild(xtreeJson, "");

				function setParentIdsChild(rows, parentName){
					for (var i = 0; i < rows.length; i++) {
						var row = rows[i];
						if (resParentId.options) {
							resParentId.options.push(row.id);
						} else {
							resParentId.options = [row.id];
						}
						var rule = parentName;
						var p = parentName;
						if(isSelect){
							rule = rule + "→";
							p = p + "......";
						}
						resParentId.rule[row.id] = rule + row.name + " [code: " + row.code + "]";
						setParentIdsChild(row.data, p);
					}
				}
			}
			
			$('.resourcefrom .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			// 保存
			function saveResource(formId, index, $) {
				var formObj = $("#" + formId);
				var name = formObj.find("#name").val();
				var url = formObj.find("#url").val();
				var parentId = formObj.find("#parentId").next().find('.layui-this').attr("lay-value");
				var type = formObj.find("#type").next().find('.layui-this').attr("lay-value");
				var level = formObj.find("#level").val();
				var resOrder = formObj.find("#resOrder").val();
				var state = formObj.find("#state").next().find('.layui-this').attr("lay-value");
				var note = formObj.find("#note").val();
				$.ajax({
					url: localStorage.serverHttp + '/base/auth/resource/add?_token=' + (new parent.window._user()).getData('token'),
					type: 'post',
					dataType: 'json',
					data:{
						name : name,
						url : url,
						parentId : parentId,
						type : type,
						level : level,
						resOrder : resOrder,
						state : state,
						note : note
					}
				}).done(function(res) {
					layer.msg(res.msg);
					layer.close(index);
					isXtreeReload = true;// 是否更新树
					active.reload.call();// 更新列表和树
				});
			}
			// 修改
			function editResource(formId, index, $) {
				var formObj = $("#" + formId);
				var id = formObj.find("#id").val();
				var name = formObj.find("#name").val();
				var url = formObj.find("#url").val();
				// var parentId = formObj.find("#parentId").next().find('.layui-this').attr("lay-value");
				var type = formObj.find("#type").next().find('.layui-this').attr("lay-value");
				var level = formObj.find("#level").val();
				var resOrder = formObj.find("#resOrder").val();
				// var state = formObj.find("#state").next().find('.layui-this').attr("lay-value");
				var note = formObj.find("#note").val();
				$.ajax({
					url: localStorage.serverHttp + '/base/auth/resource/update?_token=' + (new parent.window._user()).getData('token'),
					type: 'post',
					dataType: 'json',
					data:{
						id : id,
						name : name,
						url : url,
						// parentId : parentId,
						type : type,
						level : level,
						resOrder : resOrder,
						// state : state,
						note : note
					}
				}).done(function(res) {
					layer.msg(res.msg);
					layer.close(index);
					isXtreeReload = true;// 是否更新树
					active.reload.call();// 更新列表和树
				});
			}
		}
		
		function initXTree() {
			xtree3 = new layuiXtree({
				elem : 'xtree3',
				form : form,
				data : xtreeJson,
				isopen : true, //加载完毕后的展开状态，默认值：true
				ckall : true, //启用全选功能，默认值：false
				ckallback : function() {
				}, //全选框状态改变后执行的回调函数
				icon : { //三种图标样式，更改几个都可以，用的是layui的图标
					open : "&#xe7a0;", //节点打开的图标
					close : "&#xe622;", //节点关闭的图标
					end : "&#xe621;" //末尾节点的图标
				},
				color : { //三种图标颜色，独立配色，更改几个都可以
					open : "#EE9A00", //节点图标打开的颜色
					close : "#EEC591", //节点图标关闭的颜色
					end : "#828282" //末级节点图标的颜色
				},
				click : function(data) { //节点选中状态改变事件监听，全选框有自己的监听事件
					nowParentId = data.value;
					table.reload('tb', {data: foreachJson(xtree3._dataJson[0], data.value)});
					// console.log(data.elem); //得到checkbox原始DOM对象
					// console.log(data.elem.checked); //开关是否开启，true或者false
					// console.log(data.value); //开关value值，也可以通过data.elem.value得到
					// console.log(data.othis); //得到美化后的DOM对象
				}
			});

			window.onclick = function() {
				var oCks = xtree3.GetChecked(); //获取全部选中的末级节点checkbox对象，返回的为Array  
				for (var i = 0; i < oCks.length; i++) {
					// console.log(oCks[i].value);
				}
			};
		}

		/*
		 * 获取当前树的下一级的json
		 * value 当前树的code或id
		 */ 
		function foreachJson(_dataJson, value){
			// 如果是当前的json，则返回下面的list
			if(value == null || value == "" || _dataJson.code == value || _dataJson.id == value){
				return _dataJson.data;
			}else{
				var json = [];
				for(var i = 0; i < _dataJson.data.length; i ++){
					json = foreachJson(_dataJson.data[i], value);
					if(json.length > 0){
						break;
					}
				}
				return json;
			}
		}

		
		/*
		 * 将一般的JSON格式转为xTree树控件的JSON格式
		 * @param rows:json数据对象
		 * @param idFieldName:表id的字段名
		 * @param pidFieldName:表父级id的字段名
		 */
		function ConvertToTreeGridJson(rows, idFieldName, pidFieldName) {
			xtreeJson = [];
			function exists(rows, parentId) {
				for (var i = 0; i < rows.length; i++) {
					if (rows[i][idFieldName] == parentId)
						return true;
				}
				return false;
			}
			//根节点
			for (var i = 0; i < rows.length; i++) {
				var row = rows[i];
				if (!exists(rows, row[pidFieldName])) {
					var dataXtree = {
						value : row[idFieldName],
						title : row.name,
						id : row.id,
						code : row.code,
						name : row.name,
						url : row.url,
						type : row.type,
						note : row.note,
						parentId : row.parentId,
						parentCode : '',
						level : row.level,
						resOrder : row.resOrder,
						state : row.state,
						createTime : row.createTime,
						createUser : row.createUser,
						updateTime : row.updateTime,
						updateUser : row.updateUser,
						data : []
					};
					xtreeJson.push(dataXtree);
				}
			}

			var xtreeToDo = [];
			for (var i = 0; i < xtreeJson.length; i++) {
				xtreeToDo.push(xtreeJson[i]);
			}
			while (xtreeToDo.length) {
				var xtreeNode = xtreeToDo.shift(); // the parent node
				// 得到相应的子节点
				for (var i = 0; i < rows.length; i++) {
					var row = rows[i];
					if (row[pidFieldName] == xtreeNode.value) {
						var xtreeChild = {
							value : row[idFieldName],
							title : row.name,
							id : row.id,
							code : row.code,
							name : row.name,
							url : row.url,
							type : row.type,
							note : row.note,
							parentId : row.parentId,
							parentCode : xtreeNode.code,
							level : row.level,
							resOrder : row.resOrder,
							state : row.state,
							createTime : row.createTime,
							createUser : row.createUser,
							updateTime : row.updateTime,
							updateUser : row.updateUser,
							data : []
						};
						if (xtreeNode.data) {
							xtreeNode.data.push(xtreeChild);
						} else {
							xtreeNode.data = [xtreeChild];
						}
						xtreeToDo.push(xtreeChild);
					}
				}
			}
		}
	</script>
</body>
</html>